<template>
  <div class="m-l-50 m-t-30 w-500">
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="系统名称" prop="SYSTEM_NAME">
        <el-input v-model.trim="form.SYSTEM_NAME" class="h-40 w-200"></el-input>
      </el-form-item>
      <el-form-item label="LOGO">
        <el-upload
            class="upload-demo"
            :action="uploadUrl"
            drag
            :thumbnail-mode="true"
            :on-preview="viewPic"
            :on-remove="handleRemove"
            :on-success="uploadSuccess"
            :on-error="uploadFail"
            :default-file-list="fileList"
            :name="img"
            :data="upload_data"
            :before-upload="beforeUpload">
          <i class="el-icon-upload"></i>
          <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="LOGO类型">
        <el-radio-group v-model="form.LOGO_TYPE">
          <el-radio label="1">图片</el-radio>
          <el-radio label="2">文字</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="登录验证码">
        <el-radio-group v-model="form.IDENTIFYING_CODE">
          <el-radio label="1">打开</el-radio>
          <el-radio label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="登录会话有效期(建议不少于：600)" prop="LOGIN_SESSION_VALID">
        <el-input v-model.number="form.LOGIN_SESSION_VALID" class="h-40 w-200"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add()" :loading="isLoading">提交</el-button>
      </el-form-item>
    </el-form>
    <preview ref="preview" :url="propsImg"></preview>
  </div>
</template>
<script>
  import http from '../../../../assets/js/http'
  import preview from './preview.vue'
  import _g from '@/assets/js/global'
  import config from '@/assets/js/config.js'
  import fomrMixin from '../../../../assets/js/form_com'
  import { Button, Form, FormItem, Input, Upload, Radio, RadioGroup } from 'element-ui'
  Vue.use(Button)
  Vue.use(Form)
  Vue.use(FormItem)
  Vue.use(Input)
  Vue.use(Upload)
  Vue.use(Radio)
  Vue.use(RadioGroup)

  export default {
    data() {
      return {
        isLoading: false,
        fileList: [],
        propsImg: '',
        form: {
          SYSTEM_NAME: '',
          IDENTIFYING_CODE: '0',
          LOGO_TYPE: '1',
          LOGIN_SESSION_VALID: null,
          SYSTEM_LOGO: ''
        },
        uploadUrl: '',
        upload_data: {},
        qiniuaddr: 'img.challengex.cn',
        imageUrl: '',
        rules: {
          SYSTEM_NAME: [
            { required: true, message: '请输入系统名称' }
          ],
          LOGIN_SESSION_VALID: [
            { required: true, message: '请输入登录有效期' },
            { type: 'number', message: '请输入数字' }
          ]
        }
      }
    },
    methods: {
      add() {
        this.$refs.form.validate((pass) => {
          if (pass) {
            this.isLoading = true
            this.apiPost('admin/systemConfig', this.form).then((res) => {
              this.handelResponse(res, (data) => {
                this.isLoading = false
                _g.toastMsg('success', '提交成功')
              }, () => {
                this.isLoading = false
              })
            })
          }
        })
      },
      uploadSuccess(res, file, fileList) {
        if (res.key !== null) {
          // 插入图片  res.info为服务器返回的图片地址
          this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.key
        }
        this.form.SYSTEM_LOGO = this.imageUrl
        let data = {
          name: '图片',
          url: this.imageUrl
        }
        if (this.fileList.length) {
          this.fileList[0] = data
        } else {
          this.fileList.push(data)
        }
        this.getImgToken()
      },
      // eslint-disable-next-line handle-callback-err
      uploadFail(err, res, file) {
        this.getImgToken()
      },
      handleRemove(file, fileList) {
        this.getImgToken()
      },
      viewPic() {
        this.propsImg = this.fileList[0].url
        this.$refs.preview.open()
      },
      // 富文本图片上传前
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        this.quillUpdateImg = true
        return isJPG && isLt2M
        // 显示loading动画
      },
      getImgToken() {
        this.apiGet('tool/img/getToken/').then(res => {
          this.upload_data = { token: res.data.token }
        })
      }
    },
    created() {
      this.getImgToken()
      this.uploadUrl = 'https://upload-z2.qiniup.com'
      this.apiPost('admin/tool/getConfigs').then((res) => {
        this.handelResponse(res, (data) => {
          this.form.SYSTEM_NAME = data.SYSTEM_NAME
          this.form.IDENTIFYING_CODE = data.IDENTIFYING_CODE
          this.form.LOGIN_SESSION_VALID = parseInt(data.LOGIN_SESSION_VALID)
          this.form.LOGO_TYPE = data.LOGO_TYPE
          if (data.SYSTEM_LOGO) {
            let img = config.HOST + data.SYSTEM_LOGO
            this.fileList.push({ name: '图片', url: img })
            this.form.SYSTEM_LOGO = data.SYSTEM_LOGO
          }
        })
      })
    },
    components: {
      preview
    },
    mixins: [http]
  }
</script>
